<template>
  <div class="userBox bg-f2" id="uploadtu9">
    <div class="bg-fff">
      <el-breadcrumb separator-class="el-icon-arrow-right" class="pAll">
        <el-breadcrumb-item>
          <span @click="goBack" class="goTitle">人工巡检</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-form :model="ruleForm" class="pAll" :rules="rules" ref="ruleForm" label-width="130px">
        <el-row>
          <el-col :span="2">
            <span class="title">系统信息：</span>
          </el-col>
          <el-col :span="8">
            <el-form-item label="视频巡逻：">
              <el-radio-group v-model="ruleForm.spxl">
                <el-radio label="0">正常</el-radio>
                <el-radio label="1">故障</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="录像回放：">
              <el-radio-group v-model="ruleForm.lxhf">
                <el-radio label="0">正常</el-radio>
                <el-radio label="1">故障</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="电视墙：">
              <el-radio-group v-model="ruleForm.dsq">
                <el-radio label="0">正常</el-radio>
                <el-radio label="1">故障</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="电子地图：">
              <el-radio-group v-model="ruleForm.dzdt">
                <el-radio label="0">正常</el-radio>
                <el-radio label="1">故障</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="视频地图：">
              <el-radio-group v-model="ruleForm.spdt">
                <el-radio label="0">正常</el-radio>
                <el-radio label="1">故障</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="车辆查询：">
              <el-radio-group v-model="ruleForm.clcx">
                <el-radio label="0">正常</el-radio>
                <el-radio label="1">故障</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="人脸查询：">
              <el-radio-group v-model="ruleForm.rlcx">
                <el-radio label="0">正常</el-radio>
                <el-radio label="1">故障</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="枪球联动：">
              <el-radio-group v-model="ruleForm.qqld">
                <el-radio label="0">正常</el-radio>
                <el-radio label="1">故障</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="平台日志：">
              <el-radio-group v-model="ruleForm.ptrz">
                <el-radio label="0">正常</el-radio>
                <el-radio label="1">故障</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-form-item label="故障现象描述：">
              <el-input v-model.trim="ruleForm.gzxxms" clearable type="textarea" :rows="6" :maxlength="255" resize="none" show-word-limit placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="系统所属机构：" prop="ssjg_ID">
              <el-select v-model="ruleForm.ssjg_ID" clearable placeholder="请选择" class="inputSelect">
                <el-option v-for="item in jgmcOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="巡检机构:" prop="xjjg_ID">
              <el-select v-model="ruleForm.xjjg_ID" clearable placeholder="请选择" class="inputSelect" @change="xjjgChange">
                <el-option v-for="item in jgmcOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="巡检人：" prop="xjr">
              <el-select v-model="ruleForm.xjr" :no-data-text="tiText2" clearable placeholder="请选择" class="inputSelect">
                <el-option v-for="item in chufalxOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="巡检时间：" prop="xjsj">
              <el-date-picker value-format="yyyy-MM-dd" v-model="ruleForm.xjsj" :picker-options="pickerBeginDateBefore" type="date" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="巡检单图片：">
              <el-upload
                action="#"
                ref="upload"
                list-type="picture-card"
                accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG"
                :auto-upload="false"
                :on-change="lalal"
                :file-list="fileList"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
              <span class="el-upload__tip">只能上传jpg/png文件，且不超过2M</span>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="fooer_btn">
          <el-button size="medium" @click="goBack" class="btnSizeStyle">取消</el-button>
          <el-button type="primary" :loading="goliebiao" class="btnSizeStyle" size="medium" @click="baoCun(title, 'ruleForm')" v-preventReClick>保存</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { setUrl } from '../../utils/getUrl.js'
import { xunJian, pinT, upload } from '../../utils/allUrl.js'
import { startLoading, endLoading } from '@/utils/loading.js'
export default {
  data() {
    return {
      ruleForm: {
        spxl: '0', // 视频巡逻(0正常、1故障)
        lxhf: '0', // 录像回放(0正常、1故障)
        qqld: '0', // 枪球联动(0正常、1故障)
        spdt: '0', // 视频地图(0正常、1故障)
        rlcx: '0', // 人脸查询(0正常、1故障)
        dsq: '0', // 电视墙(0正常、1故障)
        dzdt: '0', // 电子地图(0正常、1故障)
        clcx: '0', // 车辆查询(0正常、1故障)
        ptrz: '0', // 平台日志(0正常、1故障)
        gzxxms: '', // 故障现象描述
        ssjg_ID: '', // 所属机构名称
        xjjg_ID: '', // 巡检机构名称
        xjr: '', // 巡检人
        xjsj: '',
      },
      rules: {
        ssjg_ID: [{ required: true, message: '此处为必填项', trigger: 'change' }],
        xjjg_ID: [{ required: true, message: '此处为必填项', trigger: 'change' }],
        xjr: [{ required: true, message: '此处为必填项', trigger: 'change' }],
        xjsj: [{ required: true, message: '此处为必填项', trigger: 'blur' }],
      },
      jgmcOptions: [],
      chufalxOptions: [],
      title: '', // 标题
      //  图片上传
      imgUrl: [],
      fileList: [], // 上传列表
      dialogVisible: false,
      dialogImageUrl: '', // 预览
      goliebiao: false, // 防重复点击
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },
      tiText1: '暂无数据', // 机构提示
      tiText2: '暂无数据', // 巡检人提示
    }
  },
  created() {
    // if (getUrl('jurisdiction')) {
    // } else {
    //   this.$router.push('/sysTesting')
    //   return
    // }
    const { title, content } = this.$route.query
    this.title = title
    if (content) {
      this.getList(content)
    }
    // 获取机构
    this.getMechanism()
    // 获取巡检人
    this.getXunJianRen()
  },
  methods: {
    async getList(id) {
      const params = new URLSearchParams()
      params.append('ID', id)
      const { data: res } = await this.$http.post(`${xunJian}xtxjd/list`, params)
      if (res.code === '0000') {
        const content = res.data.list[0]
        this.ruleForm = content
        this.ruleForm.xjsj = this.detaTiem(content.xjsj)
        if (JSON.parse(content.zp).length !== 0) {
          const cao = content.zp.replace(/uid/g, 'name')
          this.fileList = JSON.parse(cao)
          this.imgUrl = this.fileList
        } else {
          this.fileList = []
          this.imgUrl = this.fileList
        }
      } else {
        this.ruleForm = []
      }
    },
    // 转换时间格式
    detaTiem(value) {
      if (value) {
        const dt = new Date(value)
        const y = dt.getFullYear()
        const m = (dt.getMonth() + 1 + '').padStart(2, 0)
        const d = (dt.getDate() + '').padStart(2, 0)
        return `${y}-${m}-${d}`
      } else {
        return ''
      }
    },
    // 获取机构
    async getMechanism() {
      const { data: res } = await this.$http.post(`${pinT}zzjg/list`)
      if (res.code !== '0000') {
        this.jgmcOptions = []
        this.tiText1 = res.message
      } else {
        const a = JSON.stringify(res.data.list)
        const newCity = a.replace(/id/g, 'value')
        const cityList = newCity.replace(/jgmc/g, 'label')
        const cityList2 = cityList.replace(/jgbmmc/g, 'label')
        const c = cityList2.replace(/bmList/g, 'children')
        this.jgmcOptions = JSON.parse(c)
      }
    },
    async getXunJianRen(val) {
      const params = new URLSearchParams()
      if (val) {
        params.append('ZZJG_ID', val)
      }
      const { data: res } = await this.$http.post(`${pinT}yonghu/selectYongHu`, params)
      if (res.code !== '0000') {
        this.tiText2 = res.message
        return (this.chufalxOptions = [])
      } else {
        const a = JSON.stringify(res.data.list)
        const newCity = a.replace(/id/g, 'value')
        const cityList = newCity.replace(/zsxm/g, 'label')
        this.chufalxOptions = JSON.parse(cityList)
      }
    },
    xjjgChange(val) {
      this.getXunJianRen(val)
    },
    // 删除图片
    handleRemove(a) {
      const index = this.imgUrl.findIndex((item) => item.uid === a.uid)
      this.imgUrl.splice(index, 1)
    },
    // 添加图片
    async lalal(el) {
      let videoSize = el.size / (1024 * 1024) // 转成M格式
      videoSize = videoSize.toFixed(1) // 保留小数点后一位
      if (videoSize > 2) {
        const dele = this.$refs.upload.uploadFiles
        const index = dele.findIndex((item) => item.uid === el.uid)
        dele.splice(index, 1)
        // this.$refs.upload.uploadFiles
        return this.$message({
          type: 'error',
          message: '图片超过最大限制2M',
          center: true,
        })
      } else {
        startLoading(document.getElementById('uploadtu9'))
        const file = el.raw
        const fd = new FormData()
        let arr = {}
        fd.append('file', file) // 传文件
        fd.append('type', 4) // 巡检中心路径类型
        const { data: res } = await this.$http.post(`${upload}`, fd)
        endLoading()
        if (res.code === '0000') {
          res.data.forEach((item) => {
            arr = {
              uid: el.uid,
              url: item,
            }
          })
          this.imgUrl.push(arr)
        } else {
          return this.$message({
            type: 'error',
            message: res.message,
            center: true,
          })
        }
      }
    },
    // 预览
    handlePictureCardPreview(e) {
      this.dialogImageUrl = e.url
      this.dialogVisible = true
    },
    baoCun(title, ruleForm) {
      this.goliebiao = true
      const a = setTimeout(() => {
        this.goliebiao = false
      }, 5000)
      // const user = JSON.parse(getUrl('userconter'))
      const { spxl, lxhf, qqld, spdt, rlcx, dsq, dzdt, clcx, ptrz, gzxxms, ssjg_ID, xjjg_ID, xjr, xjsj, id } = this.ruleForm
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (title === '录入巡检单') {
            const params = new URLSearchParams()
            params.append('SPXL', spxl)
            params.append('LXHF', lxhf)
            params.append('DSQ', dsq)
            params.append('DZDT', dzdt)
            params.append('SPDT', spdt)
            params.append('CLCX', clcx)
            params.append('RLCX', rlcx)
            params.append('QQLD', qqld)
            params.append('PTRZ', ptrz)
            params.append('GZXXMS', gzxxms)
            params.append('XJSJ', xjsj)
            params.append('XJJG_ID', xjjg_ID)
            params.append('SSJG_ID', ssjg_ID)
            params.append('XJR', xjr)
            params.append('imgs', JSON.stringify(this.imgUrl))
            const { data: res } = await this.$http.post(`${xunJian}xtxjd/create`, params)
            if (res.code === '0014') {
              return ''
            } else if (res.code !== '0000') {
              clearTimeout(a)
              this.goliebiao = false
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }
            this.$message({
              type: 'success',
              message: res.message,
              center: true,
            })
            this.goBack()
          } else {
            const params2 = new URLSearchParams()
            let xjrs = ''
            let xjjg = ''
            let ssjg = ''
            this.chufalxOptions.forEach((item) => {
              if (item.label === xjr || item.value === xjr) {
                xjrs = item.value
              }
            })
            this.jgmcOptions.forEach((item) => {
              if (item.label === xjjg_ID || item.value === xjjg_ID) {
                xjjg = item.value
              }
              if (item.label === ssjg_ID || item.value === ssjg_ID) {
                ssjg = item.value
              }
            })
            params2.append('ID', id)
            params2.append('SPXL', spxl)
            params2.append('LXHF', lxhf)
            params2.append('DSQ', dsq)
            params2.append('DZDT', dzdt)
            params2.append('SPDT', spdt)
            params2.append('CLCX', clcx)
            params2.append('RLCX', rlcx)
            params2.append('QQLD', qqld)
            params2.append('PTRZ', ptrz)
            params2.append('GZXXMS', gzxxms)
            params2.append('XJSJ', xjsj)
            params2.append('XJJG_ID', xjjg)
            params2.append('SSJG_ID', ssjg)
            params2.append('XJR', xjrs)
            params2.append('imgs', JSON.stringify(this.imgUrl))
            const { data: res } = await this.$http.post(`${xunJian}xtxjd/update`, params2)
            if (res.code === '0014') {
              return ''
            } else if (res.code !== '0000') {
              clearTimeout(a)
              this.goliebiao = false
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }

            this.$message({
              type: 'success',
              message: res.message,
              center: true,
            })
            this.goBack()
          }
        } else {
          this.goliebiao = false
          this.$message({
            type: 'error',
            message: '请填写正确的信息',
            center: true,
          })
          return false
        }
      })
    },
    goBack() {
      setUrl('Inspection', 'systemInspection')
      this.$router.push('/systemInspection')
    },
  },
}
</script>
<style lang="scss" scoped>
.userBox {
  // .goTitle {
  //   font-size: 14px;
  //   font-weight: 600;
  //   color: #333;
  //   cursor: pointer;
  // }
  // .el-breadcrumb {
  //   height: 45px;
  //   line-height: 45px;
  //   border-bottom: 1px solid rgba(229, 229, 229, 1);
  //   .el-breadcrumb-item {
  //     font-size: 10px;
  //   }
  // }
  .el-row {
    // padding: 15px 25px 0 25px;
    border-bottom: 1px solid #f2f2f2;
    .title {
      display: block;
      height: 38px;
      line-height: 38px;
      color: rgba(89, 89, 89, 1);
      font-size: 15px;
      font-weight: 600;
    }
    .el-form-item {
      .inputSelect {
        width: 260px;
      }
      .jinDuTitle {
        height: 18px;
        line-height: 22px;
        color: #c0c4cc;
      }
      .iconBtn {
        margin-left: 10px;
        font-size: 15px;
        color: rgba(187, 187, 187, 1);
        cursor: pointer;
      }
      .DuFen {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .btnGs {
          margin: 0 10px;
        }
      }
      .el-upload__tip {
        font-size: 12px;
        color: #a1a3a8;
        margin-top: 7px;
        padding-left: 10px;
      }
      .xunze {
        margin-top: 18px;
        display: flex;
        > span {
          color: #333;
          width: 80px;
          margin-right: 10px;
        }
      }
    }
    .form-item-bottom {
      margin-bottom: 10px;
    }
  }
  .fooer_btn {
    margin: 10px 0;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
